<template>
    <div class="container">
        <a-card title="外包管理">
            <div class="tool-bar">
                <div>
                    <a-input-search allowClear style="width: 200px;color: #05b089" v-model="kw" @search="resetList"
                        placeholder="请输入关键词"></a-input-search>
                    <a-button type="default" @click="resetList">重置</a-button>
                </div>
                <div>
                    <a-button type="primary" @click="exportData" :loading="downloadLoading"
                        v-if="$utilCheckPermission(['outsourcingManagementExportInfo'])">导出数据</a-button>
                </div>
            </div>
            <a-tabs style="margin-top: 20px" type="card" :default-active-key="tabKey" @change="tabChange">
                <a-tab-pane v-for="(item, i) in tabsData" :key="item" :tab="item">
                    <div class="table">
                        <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>item.id" :columns="tableOption.columns"
                                 :data-source="tableOption.tableData" :pagination="tableOption.pagination">
                            <template slot="action" slot-scope="text, record, index">
                                <a-button
                                    v-if="$utilCheckPermission(['outsourcingManagementRealityYield'])"
                                    style="margin-right: 10px"
                                    :type="record.ifFillInPracticalYield === 0 ? 'primary' : 'warning'"
                                    @click="modalShow(record)"
                                >{{ record.ifFillInPracticalYield === 0 ? "实际产量" : "修改产量" }}</a-button>
                                <a-button type="primary" @click="recordDetail(record)">操作记录</a-button>
                            </template>
                        </a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <a-modal v-model:visible="modalOption.visible" :title="modalOption.title" @ok="modalOption.onOk"
            @cancel="modalOption.onCancel" okText="确认" cancelText="返回">
            <a-form-model :model="modalOption.formData" :rules="modalOption.rules" :label-col="{ span: 6 }"
                :wrapper-col="{ span: 16 }">
                <a-form-model-item label="包装批号" prop="productBatch">
                    <a-input disabled v-model="modalOption.formData.productBatch" placeholder="请输入包装批号" />
                </a-form-model-item>
                <a-form-model-item label="入库时间" prop="epibolyFinishTime">
                    <a-date-picker v-model="modalOption.formData.epibolyFinishTime" valueFormat="YYYY-MM-DD" style="width:100%" :locale="modalOption.locale" type="date"
                     @change="dateChange"/>
                </a-form-model-item>
                <a-form-model-item label="实际产量" prop="practicalYield">
                    <div class="inputNumber-box">
                        <a-input-number style="width:100%" v-model="modalOption.formData.practicalYield" :min="1" :max="100000" />
                        <span class="suffix">kg</span>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="操作人" prop="operator">
                    <a-input disabled v-model="modalOption.formData.operator" placeholder="请输入操作人" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal v-model:visible="recordModalOption.visible" :title="recordModalOption.title" @ok="recordModalOption.ok"
                 @cancel="recordModalOption.ok" okText="确认" cancelText="返回">
            <a-table bordered :rowKey="(item,i)=>item.id" :data-source="recordModalOption.datasource" :columns="recordModalOption.columns" :pagination="false"></a-table>
        </a-modal>

    </div>
</template>

<script>
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import { h } from "vue";
import handleRequest from "@/utils/handleRequest";
import nextApi from "@/api/nextApi";
import { dateFormat } from "@/utils/timeHandler";
import { getStorageUserInfo } from "@/utils";
import { downLoadFile } from "@/utils/index";

export default {
    name: "outsourcingManagement",
    data() {
        return {
            downloadLoading: false,
            kw: "",
            tableOption: {
                columns: [
                    {
                        align: "center",
                        dataIndex: "productBigKind",
                        key: "productBigKind",
                        title: "产品大类",
                    },
                    {
                        align: "center",
                        dataIndex: "varietyName",
                        key: "varietyName",
                        title: "名称",
                    },
                    {
                        align: "center",
                        dataIndex: "productBatch",
                        key: "productBatch",
                        title: "包装批次",
                    },
                    {
                        align: "center",
                        dataIndex: "productionTime",
                        key: "productionTime",
                        title: "生产日期",
                    },
                    {
                        align: "center",
                        dataIndex: "placeOfOrigin",
                        key: "placeOfOrigin",
                        title: "产地",
                    },
                    {
                        align: "center",
                        dataIndex: "discretion",
                        key: "discretion",
                        title: "装量",
                    },
                    {
                        align: "center",
                        dataIndex: "practicalYield",
                        key: "practicalYield",
                        title: "实际产量(kg)",
                    },
                    {
                        align: "center",
                        dataIndex: "medicineClass",
                        key: "medicineClass",
                        title: "中药等级",
                        customRender: (text, record, index) => `${record.medicineClass?record.medicineClass:'-'}`,
                    },
                    {
                        align: "center",
                        dataIndex: "action",
                        key: "action",
                        title: "操作",
                        scopedSlots: { customRender: "action" },
                    },
                ],
                loading: false,
                tableData: [],
                pagination: {
                    pageSize: 10,
                    current: 1,
                    total: 0,
                    showTotal: (total) => `共${total}条`,
                    onChange: (page, pageSize) => this.pageChange(page, pageSize),
                },
            },
            modalOption: {
                title: "实际产量",
                visible: false,
                id: "",
                locale,
                formData: {
                    productBatch: "",
                    epibolyFinishTime: "",
                    practicalYield: 1,
                },
                rules: {
                    productBatch: [{ required: true, message: "请输入包装批号", trigger: "blur" }],
                    epibolyFinishTime: [{ required: true, message: "请选择入库时间", trigger: "change" }],
                    practicalYield: [{ required: true, message: "请输入实际产量", trigger: "blur" }],
                    operator: [{ required: true, message: "请输入操作人", trigger: "blur" }],
                },
                onOk: () => {
                    this.ModalOk();
                },
                onCancel: () => {
                    this.modalOption.visible = false;
                    this.modalOption.formData = {
                        productBatch: "",
                        epibolyFinishTime: "",
                        practicalYield: 1,
                    }
                },
            },
            recordModalOption:{
                visible:false,
                title:'操作记录',
                datasource:[],
                columns:[
                    {
                        title:'操作人',
                        dataIndex:'adjustPerson',
                        key:'adjustPerson'
                    },
                    {
                        title:'操作时间',
                        dataIndex:'adjustTime',
                        key:'adjustTime'
                    },
                    {
                        title:'修改产量数',
                        dataIndex:'practicalYield',
                        key:'practicalYield'
                    }
                ],
                ok:()=>{
                    this.recordModalOption.visible = false
                },
            },
            tabsData:['中药饮片','直服饮片','单方饮片'],
            tabKey:'中药饮片'
        };
    },
    mounted() {
        this.getTableData();
    },
    methods: {
        tabChange(key){
            this.tabKey = key
            this.getTableData()
        },
        //导出
        async exportData() {
            this.downloadLoading = true;
            nextApi.downloadOutsourcingInfo(this.keywords, (res) => {
                const blob = new Blob([res.data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                    // type: "application/vnd.ms-excel",
                });
                downLoadFile(blob, "外包数据列表");
                this.downloadLoading = false;
            });
        },
        async getTableData() {
            this.tableOption.loading = true;

            let params = {
                pageNum: this.tableOption.pagination.current,
                pageSize: this.tableOption.pagination.pageSize,
                varietyName: this.kw,
                productType: this.tabKey
            };
            try {
                const res = await nextApi.gePackagingList(params);
                this.tableOption.tableData = res.data?.rows || [];
                this.tableOption.pagination.total = res.data?.total || 0;
            } finally {
                this.tableOption.loading = false;
            }
        },
        resetList() {
            this.tableOption.pagination.current = 1;
            this.getTableData();
        },
        pageChange(page, pageSize) {
            this.tableOption.pagination.current = page;
            this.getTableData();
        },
        //增加打印量弹窗
        modalShow(params) {
            const userInfo = getStorageUserInfo();
            this.modalOption.formData = {
                id: params.id,
                productBatch: params.productBatch,
                epibolyFinishTime: params.epibolyFinishTime,
                practicalYield: params.practicalYield,
                operator: userInfo.name,
            };
            console.log(this.modalOption.formData)
            this.modalOption.id = params.id;
            this.modalOption.visible = true;
        },
        //展示操作记录
        async recordDetail(record){
            this.recordModalOption.visible = true
            try{
                const res = await nextApi.getRecord({id:record.id})
                this.recordModalOption.datasource = res.data.records
            }catch (e) {
                throw e
            }
        },
        dateChange(v){
            this.modalOption.formData.epibolyFinishTime = v
        },
        async ModalOk() {
            this.modalOption.loading = true;
            try {
                const res = await nextApi.setAdjustPracticalYield({
                    id: this.modalOption.formData.id,
                    practicalYield: this.modalOption.formData.practicalYield,
                    epibolyFinishTime: this.modalOption.formData.epibolyFinishTime,
                });
                this.$message.success(res.msg);
                this.modalOption.visible = false;
                this.getTableData();
            } finally {
                this.modalOption.loading = false;
            }
        },
    },
};
</script>
<style scoped lang="scss">
@import "@/assets/common/commonStyle.scss";
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
.info-box {
    padding: 20px;
    border: 1px solid rgba(70, 70, 70, 0.11);
}
.item-box {
    margin: 20px 0;
}
.checks-select {
    margin: 10px 0;
    position: relative;
}
.content {
    background-repeat: no-repeat;
    background-size: 100% 20%;
    background-position: bottom;
    .item {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        align-items: center;
        .label {
            flex-shrink: 0;
            height: 20px;
            overflow: hidden;
            .label-text {
                display: inline-block;
                width: 120px;
                text-align: justify;
                font-size: 13px;
                color: #3e3e3e;
                font-style: normal;
                line-height: 14px;
                height: 20px;
                vertical-align: text-top;
                transform: translateY(3px);
            }
            .label-text::after {
                content: "";
                display: inline-block;
                width: 100%;
            }
        }
        .value {
            margin-bottom: 10px;
            padding: 0 10px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #3e3e3e;
            text-align: left;
            font-style: normal;
        }
    }
}
.printTemplate-box {
    display: flex;
    align-items: center;
    .QRCode {
        margin-left: 150px;
        img {
            width: 180px;
        }
    }
}
.inputNumber-box {
    position: relative;
    &:hover {
        .suffix {
            opacity: 1;
        }
    }
    .suffix {
        transition: all 0.3s;
        position: absolute;
        opacity: 0;
        right: 30px;
    }
}
</style>
